<template>
  <tr @click='select ':class="{'selected-style':isSelected}">
    <td>{{ index + 1 }}</td>
    <td>{{ book.title }}</td>
    <td>￥{{ book.price }}</td>
    <td>
      <button 
        :disabled="book.quantity <= 0" 
        @click='decrement'
      >-</button>
      {{ book.quantity }}
      <button @click='increment'>+</button>
    </td>
    <td>
      <button @click='remove'>移除</button>
    </td>
  </tr>
</template>

<script>
export default {
  props: {
    book: Object,
    index: Number,
    selectedBook:Object
  },
  computed:{
         isSelected(){
            return this.selectedBook&&this.book.title===this.selectedBook.title
        }
  },
  methods:{
        remove(){
            this.$emit('remove',this.index);
        },
        increment(){
            this.$emit('increment',this.index);
        },
        decrement(){
            this.$emit('decrement',this.index);
        },
        select(){
            this.$emit('select',this.book)
        },
   
    },
}
</script>
<style>
.selected-style{
    background-color: blueviolet;
}
</style>